import Taro, { PureComponent } from '@tarojs/taro'
// import { Slider } from 'taro-ui'
import { View, Image, Audio } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import styles from './index.module.less'
import MediaPlayerBar from '../../components/MediaPlayerBar'
import CardList from '../../components/CardList'
import MediaInfo from '../../components/MediaInfo'
import Footer from '../../components/Footer'


export default class Player extends PureComponent {  

    constructor(props) {
        super(props);
        this.audio = Taro.createRef();
        this.increase = 0;
        this.state = {
            totalTime: 0,
            currentTime: 0,
            bufferedTime: 0,
            playing: false,
            playRate: 1
        }
    }

    componentDidMount() {
        console.log(this.audio);
        const audio = this.audio.audio;
        // 这里需要设置audio的canplay事件监听
        audio.addEventListener("canplay", () => {
            //获取总时间
            const totalTime = parseInt(audio.duration);
            this.setState({
                totalTime
            });
        });
        // 播放中添加时间变化监听
        audio.addEventListener("timeupdate", () => {

            //获取当前播放时间
            const currentTime = parseInt(audio.currentTime);
            // 缓存对象
            const buffered = audio.buffered;
            // 当前缓存时间
            let bufferedTime = 0;
            if (buffered.length !== 0) {
                bufferedTime = buffered.end(buffered.length - 1);
            }
            // 未拖动时根据时间变化设置当前时间
            this.setState({
                currentTime,
                bufferedTime
            });

        });

        audio.addEventListener("playing", () => {
            this.setState({
                playing: true
            });
        });
        audio.addEventListener("pause", () => {
            this.setState({
                playing: false
            });
        });


        //当前音乐播放完毕监听
        audio.addEventListener("ended", () => {
            audio.currentTime = 0
        });
        // // 初始化音量
        // this.initVolumeProcess();
    }

    onChange(currentTime) {
        this.audio.audio.currentTime = currentTime
    }
    // 切换多个播放速率
    changeRate() {
        const choice = [1.0, 1.25, 1.5, 2.0];
        const playRate = choice[++this.increase % choice.length];
        this.audio.audio.playbackRate = playRate;
        this.setState({ playRate });
    }

    commonClicked(item) {
        console.log(item);
    }

    render() {
        const operation = this.state.playing ? 'pause' : 'play'
        const { mediaInfo = { title: '养育男孩01', subTitle: [{ name: '学习', value: '238次' }, { name: '时间', value: '2019-12-28' }] } } = this.props;
        return (
            <View className={styles.page}>
                <View className={styles.audioContent}>
                    <Image className={styles.imgBur} src='https://img.yzcdn.cn/upload_files/2019/12/28/FosQecZRm7xtQwmvcL4LQRary9Y8.png'></Image>
                    <View className={styles.bggrey}></View>
                    <Image className={styles.coverImg} mode='aspectFit' src='https://img.yzcdn.cn/upload_files/2019/12/28/FosQecZRm7xtQwmvcL4LQRary9Y8.png'></Image>
                    <Audio
                        ref={node => this.audio = node}
                        src='http://132.232.203.178:8081/static/media/成龙,金喜善 - 美丽的神话Ⅰ.22b5e7e0.mp3'
                        poster='https://img.yzcdn.cn/upload_files/2019/12/28/FosQecZRm7xtQwmvcL4LQRary9Y8.png'
                        controls={false}
                        autoplay={false}
                        loop={false}
                        muted={false}
                        initialTime='30'
                        id='audio'
                    />
                    <View className={styles.controls}>
                        <View className={styles.playerBar}>
                            <MediaPlayerBar totalTime={this.state.totalTime} currentTime={this.state.currentTime} bufferedTime={this.state.bufferedTime} onChange={this.onChange.bind(this)} />
                        </View>
                        <View className={styles.buttons}>
                            <AtIcon value='chevron-left' size='30' color='#ffffff' onClick={() => this.audio.audio.currentTime -= 5} />
                            <AtIcon className={styles.playButton} value={operation} size='30' color='#ffffff' onClick={() => this.audio.audio[operation]()} />
                            <AtIcon value='chevron-right' size='30' color='#ffffff' onClick={() => this.audio.audio.currentTime += 5} />
                            <View className={styles.playRate} onClick={this.changeRate.bind(this)}>{this.state.playRate + 'X'}</View>
                        </View>
                    </View>

                </View>
                <MediaInfo {...mediaInfo} />
                <View className={styles.columInfo}>
                    <CardList />
                </View>
                <Footer></Footer>
            </View>
        )
    }
}
